<template>
  <div>
    <Headerbar></Headerbar>
    <el-container>       
      <el-container>

        <Sidebar></Sidebar>
      
        <el-main>
          <el-row :gutter="20">
            <el-col :span="12">
              <h3 class="common-title"><i class="el-icon-tickets"></i> 所有</h3>
              <el-row>
                  <el-col :span="19">
                      <el-input 
                              placeholder="添加任务至'收集箱',回车即可保存" 
                              v-model="task"  v-on:keyup.enter.native="addTask"   
                          >
                          <i slot="prefix" class="el-input__icon el-icon-edit"></i>
                      </el-input>
                  </el-col>
                  <el-col :span="4" :offset="1">
                      <el-select placeholder="选择标签" v-model="tag" filterable>
                          <el-option label="# 学习" value="# 学习"></el-option>
                          <el-option label="# 娱乐" value="# 娱乐"></el-option>
                          <el-option label="# 旅游" value="# 旅游"></el-option>
                          <el-option label="# 野餐" value="# 野餐"></el-option>
                      </el-select>
                  </el-col>
              </el-row>
              
              <el-table
                ref="multipleTable"
                :data="tasks"
                tooltip-effect="dark"
                style="width: 100%">
                <el-table-column
                  type="selection"
                  width="55">
                </el-table-column>
                <el-table-column
                  prop="tag"
                  label=""
                  width="120">
                  <template slot-scope="scope">
                      <el-tag
                      type="success"
                      close-transition>{{scope.row.tag}}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="title"
                  label=""
                  show-overflow-tooltip>
                </el-table-column>
              </el-table>              
              <router-view></router-view>

            </el-col>
            <el-col :span="12">
              <h3 class="common-title"><i class="el-icon-view"></i> 清单详情</h3>
            </el-col>
          </el-row>

        </el-main>
      </el-container>
    </el-container>  
  </div>
</template>

<script>

  import Headerbar from '@/pages/Common/Headerbar'
  import Sidebar from '@/pages/Common/Sidebar'

  export default {
    name: 'Lists',
    data() {
        return {
            title: '所有清单',
            task: '',
            tag: '',
            tasks: [
                { title: '这个是我的默认清单... #日常工作', tag: '#标签',complated: true}
            ]
        }
    },
    methods: {
      addTask() {
          this.tasks.push({
              title: this.task,
              tag: this.tag,
              complated: false
          })

          this.task = '',
          this.tag = ''
      },
      formatter(row, column) {
          console.log(row)
      }
    },
    components: {
      Headerbar,
      Sidebar
    }       
  }
</script>
<style scoped>
  ul,li{
    list-style-type: none
  }
  .el-header {
    background-color: #F2F6FC;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {
    color: #333;
  }
</style>
